<template>
    <div class="banner">
        <span class="title" @click="goto('/home')">
            UpLearning
        </span>
        <ul ref="choices">
            <li @mouseover="languageShow=true">
                语言
                <LanguageChoice :style="{opacity: languageShow?1:0}" @mouseover="languageShow=true" @mouseout="languageShow=false" />
            </li>
            <li @click="goto('/login')">登录</li>
            <li @click="goto('/register')">注册</li>
            <li class="choseLi" @click="goto('/home')">主页</li>
            <li @click="goto('/about')">关于</li>
        </ul>
    </div>
</template>
<script setup>
import { onMounted, reactive, ref, defineProps, defineExpose } from 'vue';
import LanguageChoice from './LanguageChoice.vue';
import { onBeforeRouteLeave, useRouter } from 'vue-router'
import { ArrowDown } from '@element-plus/icons-vue'
const router = useRouter();

//跳转页面
const goto = function (pageName) {
    router.push(pageName);
}

//获取从父组件传来的当前是第几个页面
const props = defineProps({
    nowPage: Number
});
const pageInd = props.nowPage;

// 给被选中的页面选项添加样式
//获取banner的ul
const choices = ref();
onMounted(() => {
    for (let i = 0; i < choices.value.children.length; i++) {
        choices.value.children[i].classList.remove('choseLi');
    }
    choices.value.children[pageInd].classList.add('choseLi');
})

//语言切换
// 默认是中文
const language = ref(1);
const languageShow = ref(false)
defineExpose({
    language
})
</script>
<style scoped>
.banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    min-width: 660px;
    background-color: rgba(112, 112, 112);
    position: fixed;
    z-index: 10000;
    color: white;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 500;
}

.banner ul {
    font-size: 17px;
    list-style: none;
    display: inline-block;
    width: 50%;
    margin-right: 3%;
}

.banner li {
    float: right;
    display: inline;
    margin-right: 5%;
    cursor: pointer;
    position: relative;
}

.choseLi {
    border-bottom: 2px solid white;
    padding-bottom: 4px;
}

.title {
    display: inline-block;
    margin-left: 4%;
    cursor: pointer;
}

</style>